<template>
  <lazy-component class="zui-mt-10px zui-p-10px zui-background-color-white">
    <van-row gutter="8">
      <!-- 数组只有一个，start -->
      <van-col v-if="value.length === 1" span="24">
        <z-image @click="handleLink(value[0].path)" :src="value[0].src" width="100%" height="calc(50vw - 14px)" border-radius="2px"></z-image>
      </van-col>
      <!-- 数组只有一个，end -->

      <!-- 数组有多个，start -->
      <van-col v-else v-for="(item, index) in value" :key="index" span="12">
        <!-- 如果没有子元素，直接显示图片，start -->
        <z-image @click="handleLink(item.path)" v-if="!item.children" :src="item.src" width="100%" height="calc(50vw - 14px)" border-radius="2px"></z-image>
        <!-- 如果没有子元素，直接显示图片，end -->

        <!-- 如果有子元素，循环子元素，start -->
        <van-row gutter="8" v-else>
          <van-col span="24">
            <z-image v-for="(element, ind) in item.children" :key="ind" @click="handleLink(element.path)" :src="element.src"  class="main-stall-image" width="100%" height="calc((50vw - 14px) / 2 - 4px" border-radius="2px"></z-image>
          </van-col>
        </van-row>
        <!-- 如果有子元素，循环子元素，end -->
      </van-col>
      <!-- 数组有多个，end -->
    </van-row>
  </lazy-component>
</template>

<script>
/**
 * 首页上面的广告坑位
 * @param { array } value - value的内容数组，[{ src: src, path: path }, { children: [{ src: src, path: path }, { src: src, path: path }] }]
 */
export default {
  name: 'MainStall',
  props: {
    value: Array
  },
  methods: {
    handleLink (path) {
      console.log('跳转')
      this.$router.push({
        path: path
      })
    }
  }
}
</script>

<style lang="less">
.main-stall-image {
  &:not(:first-child) {
    margin-top: 8px;
  }
}
</style>
